<template>
    <div>
      <div style="margin: 10px 0">
        <el-input
          v-model="name"
          style="width: 200px"
          placeholder="请输入类别名字"
          suffix-icon="el-icon-position"
          class="mll-5"
        />
        <el-button class="mll-5" type="primary" @click=" fetchDataFromApi">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline" /></el-button>
      </div>
      <el-card class="box-card">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="类别编号" prop="id" />
          <el-table-column label="类别名称" prop="name" />
          <el-table-column label="前台类别排序编号" prop="sort">
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration" />
          <div style="padding: 10px 0; text-align: center;">
            <el-pagination
              :current-page="pageNum"
              :page-sizes="[5, 8, 10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        ​ <el-dialog title="菜品类型信息" :visible.sync="dialogFormVisible" width="50%">
          ​ <el-form label-width="80px" size="smaidll">
            ​ <el-form-item label="类别编号">
              ​ <el-input v-model="form.id" autocomplete="off" />
              ​ </el-form-item>
            ​ <el-form-item label="类别名称">
              ​ <el-input v-model="form.name" autocomplete="off" />
              ​ </el-form-item>
              ​ <el-form-item label="前台类别排序编号">
              ​ <el-input v-model="form.sort" autocomplete="off" />
              ​ </el-form-item>
            ​ </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">{{ isEditMode ? '修改' : '确定' }}</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getToken } from '@/utils/auth'
  import service from '@/utils/request'
  export default {
    data() {
      return {
        tableData: [],
        search: '',
        pageNum: 1,
        pageSize: 5,
        total: 0,
        name: '',
        form: {},
        dialogFormVisible: false,
        customHeaders:{      
          'X-Token': getToken(),
        },
        fileList: [],
        uploadAction: 'http://localhost:9090/file/upload',
        isEditMode: false
      }
    },
    created() {
      this.fetchDataFromApi()
    },
    methods: {
  
      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.fetchDataFromApi()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.fetchDataFromApi()
      },
      fetchDataFromApi() {
        service.get('http://localhost:9090/categories/page?page=' + this.pageNum + '&pageSize=' + this.pageSize + '&name=' + this.name)
          .then(res => {
            this.total = res.data.total
            this.tableData = res.data.rows
          })
          .catch(error => {
            console.error('Error fetching data from API:', error)
          })
      },
      reset() {
        this.name = ''
        this.fetchDataFromApi()
      },
      handleSave() {
        if (this.isEditMode) {
          this.updata()
        } else {
          this.save()
        }
      },
      handleAdd() {
        this.dialogFormVisible = true
        this.form = {}
      },
      save() {
        service.post('http://localhost:9090/categories/add', this.form).then(res => {
          if (res) {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            this.fetchDataFromApi()
          } else {
            this.$message.error('保存失败')
          }
        })
      },
      delete(id) {
        service.delete('http://localhost:9090/categories/delete?id=' + id).then(res => {
          if (res) {
            this.$message.success('删除成功')
            this.delVisibleaa = false
            this.fetchDataFromApi()
          } else {
            this.$message.error('删除失败')
          }
        })
      },
      handleEdit(row) {
        this.form = row
        this.dialogFormVisible = true
        this.isEditMode = true
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.delete(id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      updata() {
        service.put('http://localhost:9090/categories/updata', this.form).then(res => {
          if (res) {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            this.fetchDataFromApi()
          } else {
            this.$message.error('保存失败')
          }
        })
      },
    }
  }
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .mll-5 {
    margin-left: 10px;
  }
  </style>
  